<template>
  <PageWrapper contentBackground contentClass="flex" dense contentFullHeight fixedHeight>
    <BasicTable @register="tenantTable">
      <!-- 工具条 -->
      <template #toolbar>
        <a-button type="primary" @click="add"> 新增 </a-button>
        <a-button type="primary" @click="handleReloadCurrent"> 刷新当前页 </a-button>
        <a-button type="primary" @click="handleReload"> 刷新并返回第一页 </a-button>
      </template>
      <!-- 表格插槽 -->
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'logo'">
          <Avatar v-if="record.sysTenantExtWeb" :size="60" :src="record.sysTenantExtWeb.logo" />
          <Avatar v-else :size="60" src="https://192.168.1.3:3100/src/assets/images/logo.png" />
          <!-- <div v-if="record.sysTenantExtWeb"> </div> -->
        </template>
        <template v-if="column.key === 'tenantCode'">
          <a @click="detail(record.id)">{{ record.tenantCode }}</a>
        </template>
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                icon: 'clarity:note-edit-line',
                tooltip: '编辑用户资料',
                onClick: handleEdit.bind(null, record),
                //auth: 'other', // 根据权限控制是否显示: 无权限，不显示
              },
              {
                icon: 'ant-design:delete-outlined',
                color: 'error',
                tooltip: '删除',
                popConfirm: {
                  title: '是否确认删除',
                  placement: 'left',
                  confirm: handleDelete.bind(null, record),
                },
                //auth: 'super', // 根据权限控制是否显示: 有权限，会显示
              },
            ]"
            :dropDownActions="[
              {
                label: '启用',
                popConfirm: {
                  title: '是否启用？',
                  confirm: handleOpen.bind(null, record),
                },
                ifShow: (_action) => {
                  return record.status !== 'enable'; // 根据业务控制是否显示: 非enable状态的不显示启用按钮
                },
              },
              {
                label: '禁用',
                popConfirm: {
                  title: '是否禁用？',
                  confirm: handleOpen.bind(null, record),
                },
                ifShow: () => {
                  return record.status === 'enable'; // 根据业务控制是否显示: enable状态的显示禁用按钮
                },
              },
              {
                label: '同时控制',
                popConfirm: {
                  title: '是否动态显示？',
                  confirm: handleOpen.bind(null, record),
                },
                //auth: 'super', // 同时根据权限和业务控制是否显示
                ifShow: () => {
                  return true;
                },
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { Avatar } from 'ant-design-vue';
  import { BasicTable, TableAction, useTable } from '/@/components/Table';
  import { getBasicColumns, getFormConfig } from './tenantData';
  import { PageWrapper } from '/@/components/Page';
  import { sysTenantListApi, sysTenantDelApi } from '/@/api/baas/sysTenant';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useModal } from '/@/components/Modal';
  import { router } from '/@/router';
  export default defineComponent({
    components: { BasicTable, PageWrapper, TableAction, Avatar },
    setup() {
      const column = getBasicColumns();
      const { createMessage } = useMessage();
      const [tenantTable, { reload }] = useTable({
        title: '租户信息',
        titleHelpMessage: '系统租户信息',
        api: sysTenantListApi,
        useSearchForm: true,
        formConfig: getFormConfig(),
        columns: column,
        showTableSetting: true,
        pagination: { pageSize: 10 },
        // customRow: (record) => {
        //   return {
        //     onclick: () => {
        //       router.push({ name: 'tenantDetail', query: { id: record.id } });
        //     },
        //   };
        // },
        actionColumn: {
          width: 150,
          title: '操作',
          dataIndex: 'action',
          //slots: { customRender: 'action' },
        },
      });
      const [tenantModal] = useModal();
      //页面跳转
      //const go = useGo();
      // 刷新当前页面
      function handleReloadCurrent() {
        reload();
      }

      // 刷新并返回第一页
      function handleReload() {
        reload({
          page: 1,
        });
      }

      //新增
      function add() {
        //console.log('xxxxxx');
        router.push('/baas/configuration/tenant/tenantAdd');
      }

      //详情
      function detail(id: number) {
        router.push({ name: 'tenantDetail', query: { id: id } });
      }

      //成功之后
      function handleSuccess({ isUpdate, values }) {
        if (isUpdate) {
          // 演示不刷新表格直接更新内部数据。
          // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
          //const result = updateTableDataRecord(values.id, values);
          //console.log(result);
          console.log(values);
        } else {
          reload();
        }
      }

      function handleEdit(record: Recordable) {
        console.log('点击了编辑', record);
      }
      //删除
      async function handleDelete(record: Recordable) {
        try {
          let res = await sysTenantDelApi(record.id);
          if (res) {
            createMessage.success('删除成功');
            reload();
          }
        } catch (error) {
          throw error;
        }
      }

      function handleOpen(record: Recordable) {
        console.log('点击了启用', record);
      }
      return {
        tenantTable,
        handleReloadCurrent,
        handleReload,
        handleSuccess,
        tenantModal,
        add,
        handleEdit,
        handleDelete,
        handleOpen,
        Avatar,
        detail,
      };
    },
  });
</script>
